<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽多边形</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;" width="400" height="300"></canvas>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext('2d');
				createPolygon(50,50,8,40,cxt)
				var movex,movey;
				
				
				function createPolygon(dx,dy,n,size,cxt){
					cxt.beginPath();
					for(var i = 0;i<n;i++){
						var x = size * Math.cos(i*2 * Math.PI / n)+dx;
						var y = size * Math.sin(i*2 * Math.PI / n)+dy;
						cxt.lineTo(x,y);
					}
					cxt.fillStyle = "red";
					cxt.fill();
					cxt.closePath();
				}
				canvas.addEventListener("mousedown",downfun)
				
				function downfun(e){
					var x = e.clientX;
					var y = e.clientY;
					if(cxt.isPointInPath(x,y)){
						canvas.addEventListener("mousemove",movefun);
					}	
					canvas.addEventListener("mouseup",upfun);
				}
						
				function movefun(e){
					movex = e.clientX;
					movey = e.clientY;
					cxt.clearRect(0,0,canvas.width,canvas.height);	
					createPolygon(movex,movey,8,40,cxt);
				}
				
				function upfun(){
					canvas.removeEventListener("mousemove",movefun)
				}
			}
		</script>
	</body>
</html>
